<!--
 * @Author      : 徐博
 * @Date        : 2024-05-16 09:51:03
 * @LastEditTime: 2024-05-16 10:15:55
 * @LastEditors : 徐博
 * @FilePath    : /Users/xubo/study/vue3/vue3-ts-vite/src/views/user/index.vue
 * @Description : desc
 */
 -->
<template>
    <div class="page">
        <div class="page-search">
            <fe-search ref="feSearchRef" :search-configs="searchConfigs" :form-state="formState" @onSearch="getApi" />
        </div>
        <div class="page-table">
            <fe-table :columns="columns" :data-source="dataSource.dataSource" :pagination="pagination"
                :defaultSelectedRowKeys="selectedRowKeys.defaultSelectedRowKeys"
                rowKey="id" :loading="false" @changePage="changePage" @selectionChange="selectionChange">
                <template #action="{ row }">
                    <div class="action">
                        <a-button v-permission="'userList.view'" type="primary" size="small" @click="view(row)">{{t("user.view")}}</a-button>
                        <a-button v-permission="'userList.edit'" type="primary" ghost size="small" @click="edit(row)">{{t("user.edit")}}</a-button>
                        <a-button v-permission="'userList,delete'" type="primary" danger size="small" @click="handleDelete(row)">{{t("user.delete")}}</a-button>
                    </div>
                </template>
            </fe-table>
        </div>
    </div>
  <EditModal @register="registerModal" @success="getApi({})" />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import Api from '@/api/index';
import {useRouter} from "vue-router";
import FeSearch from '@/components/fe-search/index.vue';
import FeTable from '@/components/fe-table/fe-table.vue';
import { searchConfigs, columns } from './user.data';
import { ResponseUserList } from '@/type/user-type';
import {useI18n} from "vue-i18n";
import EditModal from "@/views/user/components/EditModal.vue";
import {message} from "ant-design-vue";
import {downloadFile} from "@/utils/downloadFile";

const {t} = useI18n();
const router = useRouter();

const feSearchRef = ref<any>()


const formState = ref({
    userName: '',
    mobile: ''
})
const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
})
const tableLoading = ref(true)
interface DataSource {
    dataSource: ResponseUserList[]
}
const dataSource: DataSource = reactive({
    dataSource: []
})
const selectedRowKeys = ref({
    defaultSelectedRowKeys: [] as string[]
})

/**
 * @description: 调用弹窗方法
 */
const modalMethods = ref<any>()
const registerModal = (methods: any) => {
  modalMethods.value = methods;
}
const edit = (record: any)=> {
  modalMethods.value.openModal(record);
}

const getApi = async (values: any) => {
    const { current, pageSize } = pagination.value
    selectedRowKeys.value.defaultSelectedRowKeys = []
    let params = {
        ...values,
        current,
        pageSize
    }
    const data = await Api.getUserList(params)
    dataSource.dataSource = data
    pagination.value.total = data.length
}


getApi({})
const changePage = (values: any) => {
    pagination.value.current = values.current;
    pagination.value.pageSize = values.pageSize;
  getApi(feSearchRef.value.getSearchValue());
}
const view = (row: ResponseUserList) => {
   localStorage.setItem('userDetail', JSON.stringify(row));
  router.push({
    name: 'userDetail',
    query: {
      id: row.userName
    }
  })
}
const handleDelete =async ()=> {
  Api.downloadFileApi({}).then(res => {
    console.log(res,'222')
    downloadFile(res)
  })
}
const selectionChange = (values: any) => {
    selectedRowKeys.value.defaultSelectedRowKeys = values.selectedRowKeys
}

</script>

<style lang="less" scoped>
.page {
    height: calc(100vh - 150px);

    &-search {
        padding: 18px;
        background-color: @component-background;
    }

    &-table {
        padding: 18px;
        margin-top: 18px;
        background-color: @component-background;

        .action {
            .ant-btn {
                margin-right: 10px;
                font-size: 12px;
            }
        }
    }
}</style>
